<template>
  <div class="login">
    <div class="loginForm">
      <div class="formheader">
        <div class="logo">
          <span><img src="~@/assets/bgimg/login_logo.png" alt=""></span>
          <h1>黑马面面</h1>
        </div>

        <p>用户登录</p>
      </div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="phone">
          <el-input v-model.number="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
        <el-row>
          <el-col :span="14">
            <el-form-item prop="code">
              <el-input
                v-model="form.code"
                placeholder="请输入验证码"
              /> </el-form-item></el-col>
          <el-col :span="10">
            <img :src="src" alt="" @click="imgChange">
          </el-col>
        </el-row>
        <el-form-item prop="agree">
          <el-checkbox
            v-model="form.agree"
          >我已阅读并同意
            <a href="javascript:void(0);">用户协议</a>
            和
            <a href="javascript:void(0);">隐私条款</a>
          </el-checkbox>
        </el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button @click="showRegister">注册</el-button>
      </el-form>
    </div>
    <div class="right">
      <img src="~@/assets/bgimg/login_banner_ele.png" alt="">
    </div>
    <!-- 注册弹框 -->
    <register ref="register" />
  </div>
</template>

<script>
import register from './components/register.vue'
export default {
  components: { register },
  data() {
    return {
      form: {
        phone: '18511111111', //	是	string	手机号
        password: '12345678', //	是	string	密码
        code: '', //	是	string	验证码
        agree: []
      },
      rules: {
        phone: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	手机号
        password: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	密码
        code: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	验证码
        agree: [
          {
            type: 'array',
            required: true,
            message: '请勾选协议',
            trigger: 'change'
          }
        ] //	是	协议勾选
      },
      src: process.env.VUE_APP_BASE_API + '/captcha?type=login',
      show: false
    }
  },
  methods: {
    login() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          await this.$store.dispatch('user/getMmToken', this.form)
          //  提示登录成功
          this.$message.success('登录成功')
          //   跳转回首页
          console.log(this.$route)
          if (this.$route.query.redirect) {
            this.$router.push(this.$route.query.redirect)
          } else {
            this.$router.push('/')
          }
        }
      })
    },
    // 验证码点击图片切换
    imgChange() {
      this.src =
        process.env.VUE_APP_BASE_API + '/captcha?type=login&time=' + Date.now()
    },
    showRegister() {
      this.$refs.register.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  padding: 119px 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#1493fa 28%, #01c6fa 96%);

  .loginForm {
    padding: 47px 43px;
    width: 478px;
    height: 550px;
    background-color: #f5f5f5;
    .formheader {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      font-size: 22px;
      .logo {
        margin-right: 11px;
        width: 156px;
        height: 29px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-right: 2px solid #c7c7c7;

        h1 {
          margin: 0 16px;
          font-size: 24px;
          font-weight: normal;
        }
      }
    }
    img {
      width: 100%;
    }
    .el-button {
      margin: 8px 0;
      width: 392px;
    }
    a {
      color: #01c6fa;
    }
  }
}
</style>
